<template>
  <view class="content">
    <uni-row class="demo-uni-row">
      <uni-col class="demo-uni-col">
        <view class="weui-box" v-if="title == ''">
          <h3 class=" color_gray">[ 暂无! ]</h3>
        </view>
      </uni-col>
      <uni-col class="demo-uni-col" :span=16 :offset=4>
        <view class="litmarg" v-if="title">
          <view class="weui-box strong">
            <a
              @tap="goDict($event,{id : Id, lang : lang})"
              class="uline colorBlue"
            >
              {{ title }}
            </a>
          </view>
          <view
            class="weui-box inline-box"
            v-if="subId"
            v-for="(sub, index) in subs"
            :key="index"
          >
            <view class="weui-box">
            <a
              v-if="sub.subId || sub.linkId"
              @tap="goNext($event, { title: sub.title })"
              class="colorBlue uline"
            >
              {{ sub.title }}
            </a>

            <a v-else class="colorBlue">{{ sub.title }}</a>
			  </view>
			  <view class="none-box" v-if="index !== subs.length - 1">
                +
              </view>
          </view>
          <view v-if="linkId" class="weui-box">
            <h4 class=" inline-box">汉基词根:</h4>
            <view class="inline-box">
              <a
                @tap="
                  goDict($event, { lang: 'zh', id: uni._id })
                "
                class="colorBlue uline"
              >
                {{ uni.title }}
              </a>
            </view>
          </view>
          <view v-if="isStory" class="weui-box">
            <view class="inline-box">
              <a
                @tap="goDict($event, { lang: 'story', id: Id })"
                class="colorBlue uline"
              >
                词源故事
              </a>
            </view>
          </view>
          <view v-if="uni.isMore" class="weui-box">
            <view
              class="weui-box"
              v-for="(item, index) in uni.linkMore"
              :key="index"
            >
			<uni-col class="mr-uni-col mr-r"  :span=12>
              <h4 class=" inline-box">
                {{ getLangText(item.lang) }}
              </h4>
			</uni-col>
			<uni-col class="mr-uni-col mr-l" :span=12>
              <a
                @tap="
                  goDict($event, {
                    lang: item.lang,
                    id: item._id,
                  })
                "
                class="colorBlue uline"
              >
                {{ item.title }}
              </a>			
			  </uni-col>
            </view>
          </view>
        </view>
      </uni-col>
    </uni-row>
  </view>
</template>
<script>
export default {
  data() {
    return {
      title:"",
      uni: {},
      isStory: false,
      linkId: "",
      subs: [],
      Id: "",
      Id: "",
	  subId : "",
	  lang: "en"
    };
  },
  methods: {
    async callCloudFunction() {
      try {
        const result = await uniCloud.callFunction({
          name: "getWord",
          data: {
            title: this.title, // 可选参数
          },
        });
        this.cloudResponse = JSON.stringify(result.result);
		console.log(this.cloudResponse);
      } catch (err) {
        console.error(err);
        this.cloudResponse = "Error calling cloud function";
      }
    },
	goDict(event,para){
		// console.log("dict...",event);
		uni.navigateTo({
			url: 'dict?id=' + para.id + '&lang=' + para.lang
		});
	},
	goNext(event,para){
		// console.log("subs...",event,para);
		uni.navigateTo({
			url: 'step1?lang=' + this.lang + '&title=' + para.title
		});
	}
  },
  onLoad: function (e) {
	var v = this.getByTitle(e.title);
	this.mixdata(v)
    // console.log(v,e);
  },
};
</script>
<style>
@import "index.css";
.mr-uni-col {
	margin: 10px auto;
	font-size: 18px;
}
.mr-r {
	text-align: right;
}
.mr-r h4{
	margin-right: 10px;
}
.mr-l {
	text-align: left;
}
.mr-l a{
	margin-left: 10px;
}
.color_gray {
	color: dimgray;
}
</style>